<template>
	<div>
		<the-header-top></the-header-top>
		<logo-bar></logo-bar>

		<div class="help">
			<div class="help-wapper">
				<v-breadcrumb :breadcrumb="breadcrumb"></v-breadcrumb>
				<div class="help-container">
					<div class="help-sider">
						<div class="sider-item" v-for="(item, index) in titleList">
							<div class="sider-title">{{ item.theme }}</div>
							<div class="sider-label" v-for="title in item.title" :class="{ active: id === title.article_id }" :title="title.article_title" @click="getArticle(title.article_id)">
								{{ title.article_title }}
							</div>
						</div>
					</div>
					<div class="help-content">
						<v-title>{{ title }}</v-title>
						<div class="content" v-html="content"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VBreadcrumb from '@/components/base/VBreadcrumb'
import VTitle from '@/components/base/VTitle'

export default {
  name: 'Help',
  components: {
    TheHeaderTop,
    LogoBar,
    VBreadcrumb,
    VTitle
  },
  data () {
    return {
      titleList: [],
      id: parseInt(this.$route.query.id),
      title: null,
      content: null,
      center: ''
    }
  },
  computed: {
    breadcrumb () {
      let arr = [
        {
          name: this.$t('message.home'),
          path: '/'
        },
        {
          name: this.$t('message.helpCenter'),
          path: '/help'
        }
      ]
      return arr
    },
    type () {
      if (window.lang === 'cn') {
        return 1
      } else if (window.lang === 'thai') {
        return 2
      } else {
        return 3
      }
    }
  },
  methods: {
    getArticle (id) {
      this.$ajax.getHelpArticle(id, this.type).then((res) => {
        if (res.code === 200) {
          this.id = id
          this.title = res.data.title
          this.content = res.data.content
        }
      })
    }
  },
  activated () {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  },
  created () {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    this.$ajax.getHelpList(this.type, this.center).then((res) => {
      if (res.code === 200) {
        this.titleList = res.data
        if (this.id) {
          this.getArticle(this.id)
        } else {
          this.id = res.data[0]['title'][0]['article_id']
          this.getArticle(this.id)
        }
      }
    })
  }
}
</script>

<style scoped>
.help {
	min-width: 1200px;
	background-color: #f5f5f5;
	padding: 20px 0 40px;
}

.help-wapper {
	width: 1200px;
	margin: 0 auto;
}

.help-container {
	margin-top: 20px;
	overflow: hidden;
}

.help-sider {
	float: left;
	width: 160px;
	padding: 60px 40px;
	background-color: #fff;
}

.sider-item {
	padding-top: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid #e6e6e6;
}

.sider-item:first-child {
	padding-top: 0;
}

.sider-item:last-child {
	padding-bottom: 0;
	border: 0;
}

.sider-title {
	/*height: 22px;*/
	line-height: 22px;
	font-size: 16px;
	margin-bottom: 32px;
}

.sider-label {
	/*height: 20px;*/
	line-height: 20px;
	margin-bottom: 16px;
	color: #666;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sider-label:last-child {
	margin-bottom: 0;
}

.active {
	color: #ff600a;
}

.help-content {
	float: left;
	width: 864px;
	min-height: 711px;
	padding: 40px;
	background-color: #fff;
	margin-left: 16px;
}

.content {
	margin-top: 40px;
}
</style>
